﻿@using iPanel.Model
@namespace iPanel.Components

@if (DisplayedUrls.Count == 0)
{
    <span class="empty-data"></span>
}
else if (DisplayedUrls.Count == 1)
{
    @WriteUrl(DisplayedUrls[0])
}
else if (DisplayedUrls.Count > 1)
{
    <FluentOverflow Class="url-overflow">
        <ChildContent>
            @for (var i = 0; i < DisplayedUrls.Count; i++)
            {
                var displayedUrl = DisplayedUrls[i];

                 // Always display the first item by setting a fixed value.
                <FluentOverflowItem Data="displayedUrl" Fixed="@(i == 0 ? OverflowItemFixed.Ellipsis : OverflowItemFixed.None)">
                    @WriteUrl(displayedUrl)
                </FluentOverflowItem>
            }
        </ChildContent>
        <MoreButtonTemplate Context="overflow">
            <div @onclick:stopPropagation="true" style="display:inherit;">
                <FluentButton Appearance="Appearance.Accent" OnClick="() => _popoverVisible = !_popoverVisible" Class="url-button">
                    @($"+{overflow.ItemsOverflow.Count()}")
                </FluentButton>
            </div>
        </MoreButtonTemplate>
        <OverflowTemplate Context="overflow">
            @{
                var items = overflow.ItemsOverflow.ToList();
            }
            <div @onclick:stopPropagation="true">
                <FluentPopover AnchorId="@overflow.IdMoreButton" @bind-Open="_popoverVisible" VerticalThreshold="200" AutoFocus="false">
                    <Header>
                        @Loc[nameof(Resources.Columns.UrlsColumnDisplayOverflowTitle)]
                    </Header>
                    <Body>
                        <div class="url-popup">
                            @foreach (var item in items)
                            {
                                var d = (DisplayedUrl)item.Data!;
                                <div class="url-link">
                                    @WriteUrl(d)
                                </div>
                            }
                        </div>
                    </Body>
                </FluentPopover>
            </div>
        </OverflowTemplate>
    </FluentOverflow>
}

@if (!string.IsNullOrEmpty(AdditionalMessage))
{
    <div>@AdditionalMessage</div>
}

@code {
    RenderFragment WriteUrl(DisplayedUrl displayedUrl)
    {
        if (displayedUrl.Url != null)
        {
            return @<a href="@displayedUrl.Url" target="_blank" @onclick:stopPropagation="true">@displayedUrl.Text</a>;
        }
        else
        {
            return @<span title="@displayedUrl.Text">@displayedUrl.Text</span>;
        }
    }
}
